<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib//bootstrap-4.3.1//dist/css/bootstrap.css"></link>
	</head>

	<body>
		<script src="./lib/vue-2.6.10/dist/vue.min.js"></script>
		<script src="./lib/vue-resource.js"></script>
		<div id="app">

      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">add list</h3>
        </div>
        <div class="panel-body form-inline">
          <label>
            Name:
            <input type="text" v-model="name" >
          </label>
          <input class="btn btn-primary" type="button" value="添加"
           @click="add">
         
        </div>

      </div>
      <table class="table table-bordered table-hover table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td v-text="item.name"></td>
            <td>{{item.ctime | dateFormat}}</td>
            <td><a href='' @click.prevent="del(item.id)">删除</a></td>
          </tr>
        </tbody>
      </table>

    </div>
		<script>
      vue.http.options.root = 'http://vue.studyit.io/'
      vue.http.options.emulateJSON = true
      
      Vue.filter('dateFormat', (dataStr, pattern) => {
        var dt = new Date(dataStr)
        var y = dt.getFullYear()
        var m = dt.getMonth() + 1
        var d = dt.getDate()

        if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
          return `${y}-${m}-${d}`
        }else {
          var hh = dt.getHours()
          var mm = dt.getMinutes()
          var ss = dt.getSeconds()

          return `${y}-${m}-${d}:${hh}:${mm}:${ss}`
        }
      })
			var vm = new Vue({
				el: "#app",
				data: {
          name: '',
          list: [
            {id: 1, name: '奔驰', ctime: new Date()},
            {id: 2, name: '宝马', ctime: new Date()},
          ],
				},
        created(){
          this.getAllList()  
        },
				methods: {
          getAllList(){
            this.$http.get('api/getprodlist').then((result)=> {
              if (result.body.status === 0) {
                this.list = result.body.message
              }else {
                alert('get error')
              }
            })
          },
          add(){
            //不带斜线就是相对路径
            this.$http.post('api/addproduct',{name: this.name}).then((result)=>{
              if (result.body.status === 0) {
                this.getAllList()
              }else {
                alert('add error')
              }
            })
          },
          del(id) {
            this.$http.get('api/delproduct/'+ id).then((result)=> {
              if (result.body.status === 0) {
                this.getAllList()
              }
            })
          }
        },
      })
		</script>
	</body>
</html>
